<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" th:src="@{/static/js/jquery-1.11.1.min.js}"></script>

    <link th:href="@{/static/css/style.css}" rel="stylesheet" type="text/css" media="all" />
    <title>Title</title>
</head>
<body>
<div class="main">
    <h1>系统登录</h1>
    <div class="w3_login">
        <div class="w3_login_module">
            <div class="module form-module">
                <div class="toggle">
                    <i class="fa fa-times fa-pencil"></i>
                    <div class="tooltip">点击注册</div>
                </div>
                <div class="form">
                    <h2>登录账号</h2>
                    <form th:action="@{/success}" method="post">
                        <input type="text" name="userName" placeholder="用户名"  />
                        <input type="password" name="passWord" placeholder="密码"  />
                        <input type="submit" value="登录" />
                    </form>
                </div>
                <div class="form">
                    <h2>创建一个账号</h2>
                    <form action="#" method="post">
                        <input type="hidden" name="_method" value="post">
                        <input type="text" name="Username" placeholder="用户名"  />
                        <input type="password" name="Password" placeholder="密码"  />
                        <input type="email" name="Email" placeholder="Email"  />
                        <input type="text" name="Phone" placeholder="电话"  />
                        <input type="submit" value="注册" />
                    </form>
                </div>
                <div class="cta"><a href="#">忘记密码?</a></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('.toggle').click(function(){
        $(this).children('i').toggleClass('fa-pencil');
        $('.form').animate({height: "toggle",'padding-top': 'toggle','padding-bottom': 'toggle',opacity: "toggle"}, "slow");
        if($('.tooltip').text()==="点击注册")
        {
            $('.tooltip').html("点击登陆");
        }
        else
        {
            $('.tooltip').html("点击注册");
        }
    });
</script>
</body>
</html>